<template>
	<view class="container" :style="activityJson?.wrapper?.style">
		<!-- <view class="parent"> -->
		<view class="inner">
			<!-- <view class="inner-container"> -->
			<!-- <image :src="item.imgUrl" mode="aspectFill" v-for="item in imgUrl" :key="item.id" class="item" @click="clickCard(item)"></image> -->
			<!-- </view> -->
			<!-- 				<view class="card-box" v-for="(item) in imgUrl" :key="item.id" @click="clickCard(item)">
						<view>
							<image :src="item.imgUrl" mode="aspectFill"></image>
						</view>
						<view>
							<span>{{item.winner}}</span>
						</view>
				</view> -->
			<view v-for="(i, index) in imgUrl" :key="index" class="card-box" @click="clickCard(i, index)">
				<view class="card">
					<!-- 正面 -->
					<view class="rightSide" :class="{ active: i.activeIndex == index1 }">
						<image v-if="!i.isShow" :src="'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/85b39731-a671-47d8-9b51-920c30548653.png'" mode="aspectFill"></image>
						<image v-if="i.isShow" :src="'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/85b39731-a671-47d8-9b51-920c30548653.png'" mode="aspectFill"></image>
						<!-- <h3>点我翻牌</h3> -->
					</view>
					<!-- 反面 内容面 -->
					<view class="reverseSide" v-if="i.isShow">
						<!-- <image src="https://picsum.photos/900/600" mode="aspectFill"></image> -->
						<!-- <view class="text">{{awardData }}</view> -->
						<view class="text">{{111 }}</view>
					</view>
				</view>
			</view>

		</view>
		<view class="frequency">
			您还有{{ vdata.drawTimes }}次翻卡次数
		</view>
		<view class="text-bottom">
			<view class="text-content">
				<view class="title">
					<!-- <image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/0086ce9d-6506-47c8-9798-dbc973f771e0.png" mode="aspectFill"></image> -->
					玩法介绍
				</view>
				<view class="text">
					<view class="tItem">
						1、优惠券可以在订单结算的时候抵扣相应金额，但不能直接兑换现金。
					</view>
					<view class="tItem">
						2、每张优惠券仅可使用一次，每个订单只能使用一张优惠券。
					</view>
					<view class="tItem">
						3、优惠券只能在有效期内使用，具体使用期限以活动页面显示为准。
					</view>
					<view class="tItem">
						4、限时特价商品、提货卡、白酒、名庄酒等特殊商品下单时不能使用优惠券抵扣。
					</view>
					<view class="tItem">
						线上获得的优惠券:
					</view>
					<view class="tItem">
						优惠券会发放到您的账户，在下单页面点击“选择优惠券/码在弹出的窗口中选择优惠券，即可抵扣相应金额。
					</view>
					<view class="tItem">
						线下获得的优惠码:
					</view>
					<view class="tItem">
						您将获得一个优惠码，在下单页面点击“选择优惠券/码”，在弹出的窗口中点击“优惠券兑换”，在“请输入优惠码”下面的输入框填入优惠码，点击“确定”即可抵扣
					</view>
				</view>
			</view>
		</view>
		<!-- </view> -->

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		$activityTakePartIn,
		$getAwardTimes
	} from '@/http/apiManager.js';
	import storageManage from '@/util/storageManage.js'

	const {
		$infoBox
	} = getCurrentInstance().appContext.config.globalProperties

	// 点击的是哪个图片
	const index1 = ref(9)
	// 存放图片的路径信息
	const imgUrl = ref([{
			id: '1',
			imgUrl: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/85b39731-a671-47d8-9b51-920c30548653.png',
			activeIndex: 0,
			winner: '谢谢惠顾',
			isShow: false,
			isFlip: true
		},
		{
			id: '2',
			imgUrl: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/85b39731-a671-47d8-9b51-920c30548653.png',
			activeIndex: 1,
			winner: '谢谢惠顾',
			isShow: false,
			isFlip: true
		},
		{
			id: '3',
			imgUrl: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/85b39731-a671-47d8-9b51-920c30548653.png',
			activeIndex: 2,
			winner: '中奖了！',
			isShow: false,
			isFlip: true
		},
		{
			id: '4',
			imgUrl: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/85b39731-a671-47d8-9b51-920c30548653.png',
			activeIndex: 3,
			winner: '谢谢惠顾',
			isShow: false,
			isFlip: true
		},
		{
			id: '5',
			imgUrl: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/85b39731-a671-47d8-9b51-920c30548653.png',
			activeIndex: 4,
			winner: '谢谢惠顾',
			isShow: false,
			isFlip: true
		},
		{
			id: '6',
			imgUrl: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/85b39731-a671-47d8-9b51-920c30548653.png',
			activeIndex: 5,
			winner: '谢谢惠顾',
			isShow: false,
			isFlip: true
		},
	])
	// 保存上一次的id
	const lastId = ref('')
	const vdata = reactive({
		activityId: '', // 活动id
		activityDetail: {}, // 活动详情
		drawTimes: 0, // 抽奖次数
		hasMchNo: undefined, // 是否是商家版活动 当前用户是否绑定商户号
	})
	// 默认活动内容
	const activityJson = ref({
		"wrapper": {
			"style": {
				"background": "url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b4426ec6-ba0a-4aab-abe3-8acafdde3348.png') no-repeat left top / 100% 976rpx,#fd4b0d"
			}
		}
	})
	onLoad(({
		activityId,
		activityDetail
	}) => {
		vdata.activityId = activityId
		vdata.activityDetail = JSON.parse(decodeURIComponent(activityDetail))
		// 活动动态参数
		activityJson.value = JSON.parse(vdata.activityDetail.activityJson || '{}')
		// 标题更改为活动名称
		uni.setNavigationBarTitle({
			title: vdata.activityDetail.activityName || '翻翻乐'
		})
	})
	onShow(async () => {
		// 请求抽奖次数
		try {
			const result = await $getAwardTimes(vdata.activityId, vdata.activityDetail.activityTemplateNo)
			vdata.drawTimes = result
			vdata.hasMchNo = undefined
		} catch (e) {
			//TODO handle the exception
			vdata.hasMchNo = e
		}
	})
	// 保存中奖的信息
	const awardData = ref('')
	// 控制反面是否显示
	const isShow = ref(false)

	// 点击的为
	const clickCard = (item, index) => {
		getApp().preventActive(() => {
			// 判断用户是否绑定商户
			if (vdata.hasMchNo === 'noMchNo') { // 代表是商家版活动 并且当前用户还未绑定商户号 不允许参与活动
				uni.showModal({
					title: '参与失败',
					content: '当前用户未绑定商户身份，请绑定商户身份',
					success({
						cancel
					}) {
						if (cancel) return
						uni.navigateTo({
							url: '/pageUser/bindMch/index'
						})
					}
				})
				return false
			}
			/**
			 * 是否有参与次数再次判断 拦截
			 */
			if (vdata.drawTimes <= 0) {
				$infoBox.toast('您的抽奖机会已用尽')
				return false
			}
			imgUrl.value.forEach(b => {
				b.isShow = false
			})
			index1.value = index
			imgUrl.value.forEach(a => {
				if (a.activeIndex == index) {
					setTimeout(() => {
						a.isShow = true
						a.imgUrl =
							'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/29657545-fee0-47c0-a91c-f5c87a70e593.png'
					}, 400)
				}
			})
			$activityTakePartIn({
				activityId: vdata.activityId,
				activityTemplateNo: vdata.activityDetail.activityTemplateNo
			}).then(res => {
				vdata.drawTimes -= 1
				awardData.value = res.bizData.awardName
			})
		})
	}
</script>

<style lang="scss" scoped>
	.active {
		// transform: rotateY(180deg);
		transform: rotateY(180deg);
		transition: .6s;
	}

	.container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
		
		background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b4426ec6-ba0a-4aab-abe3-8acafdde3348.png') no-repeat left top / 100% 976rpx,
					#fd4b0d;

		.frequency {
			// width: 316rpx;
			// height: 48rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #FCE9AC;
			line-height: 48rpx;
			text-align: center;
			font-style: normal;
		}

		// .topImage{
		// 	height: 976rpx;
		// 	// position: relative;
		// 	z-index: 0;
		// }
		.inner {
			width: 100%;
			height: 608rpx;
			// background-color: green;
			// left: ;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			padding: 40rpx;
			box-sizing: border-box;
			margin-top: 380rpx;

			.card-box {
				width: 26%;
				height: 41%;
				position: relative;
				// margin: 0.5rem;
				// padding: 28rpx;
				margin-right: 20rpx;
				box-sizing: border-box;
				cursor: pointer;
				user-select: none;
				transition: all .4s;
				/*让背面的紫色盒子保留立体空间*/
				/*开启3D空间*/
				transform-style: preserve-3d;

				.card-box {
					transform: rotateY(180deg);
				}

				.card {
					width: 100%;
					height: 100%;

					// transform: rotateY(180deg);
					// padding: 28rpx;
					// box-sizing: border-box;
					.rightSide {
						position: absolute;
						width: 100%;
						height: 100%;
						z-index: 5;
						background: white;
						// overflow: hidden;
						display: flex;
						justify-content: center;
						align-items: center;

						// z-index: 1;
						image {
							// transition: 0.6s;
							width: 100%;
							height: 100%;
							// position: absolute;
							// top: 0;
							// left: 0;
						}



					}

					.reverseSide {
						// backface-visibility: hidden; /*将反转了180度的隐藏*/

						position: absolute;
						z-index: 5;
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;

						image {
							width: 100rpx;
							height: 100rpx;
						}

						.text {
							display: flex;
							text-align: center;
							// width: 100;
						}

						// transition: .3s;
						// animation-delay:.7s;
						// transform: rotateY(180deg);

						// outline-offset: -0.5rem;
						// box-sizing: border-box;
						// background: #fcfcfc;
						// position: absolute;
						// width: 100%;
						// height: 100%;
						// z-index: 5;
						// transform-style: preserve-3d;
						// transform: rotateY(180deg) translateZ(1px);
						// display: flex;
						// justify-content: center;
						// align-items: center;
						// font-weight: bold;
					}
				}
			}

			// .item{
			// 	width: 25%;
			// 	height: 40%;
			// 	padding: 28rpx;
			// }
		}

		.text-bottom {
			width: 100%;
			height: 900rpx;
			background-color: #FF4144;
			padding: 20rpx;
			box-sizing: border-box;

			.text-content {
				height: 100%;
				border-radius: 24rpx;
				background: -webkit-linear-gradient(45deg, #FEE6EB, #FEE6E9, #FEE096);
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(45deg, #FEE6EB, #FEE6E9, #FEE096);
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(45deg, #FEE6EB, #FEE6E9, #FEE096);
				/* Firefox 3.6 - 15 */
				background: linear-gradient(45deg, #FEE6EB, #FEE6E9, #FEE096);

				/* 标准的语法（必须放在最后） */
				.title {
					padding: 20rpx;
					box-sizing: border-box;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 32rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}

				.text {
					.tItem {
						padding: 20rpx;
						box-sizing: border-box;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #F03F35;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					;
				}
			}
		}

		.top-bg {
			width: 100%;
			height: 976rpx;
			background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b4426ec6-ba0a-4aab-abe3-8acafdde3348.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-position: 0 0;
		}
	}
</style>